import { Input,Button,Form,Table,Space,Modal,message,notification  } from 'antd';
import React, { useState,useEffect } from 'react';
import {useNavigate} from 'react-router-dom'
import './index.scss';
import store from '../../../store';
import {observer} from 'mobx-react';

const {Role} = store;

const SystemManagement = ()=>{
    const navigate = useNavigate();
    const [, forceUpdate] = useState({}); 
    useEffect(() => {
        forceUpdate({});
        if(Role.renyuan.length===0){
            Role.getRen();
        }
    }, []);
    // 表格数据
    const data = Role.renyuan.map(item=>{ 
        return {
            ...item.admin,
            type: item.role_name,
            typeId: item.role_id
        }
    });
    // 搜索
    const [searchForm] = Form.useForm();
    const seaAll = (values)=>{
        Role.searchAll(values.username)
    }
    // 创建账户
    const createAccount = ()=>{navigate('/home/createAccount')};
    // 所选多少条
    const [freezeLength,setLen] = useState(0);
    // 冻结
    const [isModalOpen, setIsModalOpen] = useState(false);
    const freeze = ()=>{
        if(freezeLength > 0){
            setIsModalOpen(true)
        }else{
            notification.info({
                message:'选择',
                description:'请选择需要解冻的账户！'
            });
        }
    };
    const handleOk = ()=>{
        Role.statusFre(selectedRowKeys).then(data=>{
            if(data.code===200){
                message.success('成功冻结');
                initFn();                
            }else{
                message.error('冻结失败')
            }
        })
        setIsModalOpen(false);
    }
    const handleCancel = () => {
        setIsModalOpen(false);
        message.warning('已取消冻结')
    };    
    // 解冻
    const [isUnfreeze,setUnf] = useState(false);
    const unfreeze = ()=>{
        if(freezeLength > 0){
            setUnf(true);
        }else{
            notification.info({
                message:'选择',
                description:'请选择需要解冻的账户！'
            });
    }};
    const unfOk = ()=>{
        Role.statusUnfre(selectedRowKeys).then(
            data=>{
                if(data.code===200){
                    message.success('解冻成功')
                    initFn();
                }else{
                    message.error('解冻失败')
                }
            }
        )
        setUnf(false);
    };
    const unfCancel = () => {
        setUnf(false);
        message.warning('已取消解冻')
    };
    // 删除
    const delAccount = (val)=>{
        Role.delRen(val.id).then(data=>{
            console.log(data);
            if(data.code===200){
                message.success('删除成功')
                initFn();
            }else{
                message.error('删除失败')
            }
        })
    }
    // 编辑
    const change = (val)=>{
        navigate('/home/editAccount',{replace: false,state: {val:val}})
    };
    // 重置密码
    const changePwd = (val)=>{
        navigate('/home/person',{replace:false,state:{pwd:val.username}})
    }
    // 表格
    const columns = [
        {
            title: '序号',//表格列名
            dataIndex: 'id',//对应数据字段
            key: 'id',//该列的唯一值
        },
        {
            title: '用户名',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '账户类型',
            dataIndex: 'type',
            key: 'type',
        },
        {
            title: '真实姓名',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '手机号',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '邮箱',
            dataIndex: 'email',
            key: 'email',
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            render:(_,record)=>{
                return <Space size="middle">
                <Button type="link" onClick={()=>{change(record)}} disabled={record.status==='正常'?false:true}>编辑</Button>
                <Button type="link" onClick={()=>{delAccount(record)}} disabled={record.status==='正常'?false:true}>删除</Button>
                <Button type="link" onClick={()=>{changePwd(record)}} disabled={record.status==='正常'?false:true}>重置密码</Button>
            </Space>
            }
        }
    ];
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const onSelectChange = (newSelectedRowKeys) => {
        setSelectedRowKeys(newSelectedRowKeys);
        setLen(newSelectedRowKeys.length)
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange
    };
    // 初始化函数
    const initFn = ()=>{     
        // 获取人员
        Role.getRen();
    }
    return <>
    {/* 上 */}
    <div className='system_top_one'>账号管理</div>
    <div className='system_top'>
        <Form form={searchForm} name="horizontal_login" layout="inline" onFinish={seaAll}>
            <Form.Item name="username">
                <Input placeholder="请输入账号、手机号、邮箱" />
            </Form.Item>
            <Form.Item >
                <Button type="primary" htmlType="submit"> 搜索 </Button>
            </Form.Item>
        </Form>
        <div>
            <Button className='btn' onClick={createAccount}>创建账号</Button>
            <Button className='btn' onClick={freeze}>冻结</Button>
            <Button className='btn' onClick={unfreeze}>解冻</Button>
        </div>
    </div>
    {/* 下 */}
    <Table rowSelection={rowSelection} rowKey={(record) => record.id}
    columns={columns} dataSource={data} pagination={{pageSize:5}} className="system_tab" />
    {/* 冻结 */}
    <Modal title="冻结" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
    okText="确认" cancelText="取消">
        <p>您确定要冻结选择的{freezeLength}选项吗？</p>
    </Modal>
    {/* 解冻 */}
    <Modal title="解冻" open={isUnfreeze} onOk={unfOk} onCancel={unfCancel}
    okText="确认" cancelText="取消">
        <p>您确定要解冻选择的{freezeLength}选项吗？</p>
    </Modal>
    </>
}
export default observer(SystemManagement)